<template>
	<view v-if="pageShow">
		<u-popup :show="shows" @close="shows=false" :round="20">
			<view class="mainpadding" style="background-color: #282536;" v-if="shows">
				<view class="textcenter titletext xiaobai">发布者</view>
				<view class="margin_top flexbetween"
					@click="jumper('/pages_homepage/gerenzhuye?id=',currentdata.user.id)">
					<view class="flexleft">
						<image class="grtoux margin_right3" :src="currentdata.user.avatar_text" mode="">
						</image>
						<view class="textcenter sanshier xiaobai">{{currentdata.user.nickname}}</view>
					</view>
					<view class="honbtn flexcenter" v-if="currentdata.is_gz==0 && currentdata.user.id!=myuserId"
						@click.stop="gz_fn(currentdata.user.id);shows=false;">关注</view>
				</view>
				<view class="flexbetween margin_top5">
					<view class="grbox flexleft" style="padding: 26rpx 40rpx;" @click="dz_fn(currentdata.id);shows=false;">
						<view class="dianzan margin_right1"></view>
						<view class="xiaobai ershil" v-if="currentdata.is_dz==0">点赞视频</view>
						<view class="xiaobai ershil" v-if="currentdata.is_dz==1">取消点赞</view>
					</view>
					<view class="grbox flexleft" style="padding: 24rpx 40rpx;" @click="sc_fn(currentdata.id);shows=false;">
						<view class="shoucang margin_right1"></view>
						<view class="xiaobai ershil" v-if="currentdata.is_collect==0">收藏视频</view>
						<view class="xiaobai ershil" v-if="currentdata.is_collect==1">取消收藏</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 余额不足弹框 -->
		<u-popup :show="yeshow" @close="yeclose" :round="15" mode="center">
			<view class="mainpadding">
				<view class="bigtext textcenter xiaohei fonweight">提示</view>
				<view class="titletext textcenter xiaohei " style="margin-top: 30rpx;">可用余额不足</view>
				<view class="flexbetween margin_top6">
					<view class="quxiaobtn flexcenter margin_right3" @click="yeshow=false">取消</view>
					<view class="quczbtn flexcenter" @click="yeshow=false;enterchat();">去充值</view>
				</view>
			</view>
		</u-popup>
		<!-- 支付金币弹出层 -->
		<u-popup :show="show" @close="close">
			<view class="mainpadding" style="background-color: #282536;">
				<view class="bigtext textcenter xiaobai">支付解锁</view>
				<view class="flexcenter">
					<image class="hdjb margin_top" src="../static/image/sysem/jbd.png" mode=""></image>
				</view>
				<view class="flexbetween margin_top4">
					<view class="">
						<view class="titletext xiaobai">当前余额：{{userInfo.money}}</view>
						<view class="flexleft margin_top" @click="show=false;enterchat();">
							<view class="ershil xiaohong margin_right1">点击前往充值</view>
							<u-icon name="arrow-right" color="#DD5056"></u-icon>
						</view>
					</view>
					<view class="ljjs flexcenter" @click="pay">立即解锁</view>
				</view>
			</view>
		</u-popup>
		<!-- is_look   0购买会员，1购买视频，2随便看 -->
		<template v-if="dataAll.is_look==0 || dataAll.is_look==1">
			<view class="flexcolumn" style="height: 449rpx;width: 100%;position: relative;">
				<view class="toumingbox"></view>
				<image :src="dataAll.image_text" mode=""
					style="height: 449rpx;width: 100%;position: absolute;left: 0;top: 0;"></image>
				<view class="flexcolumn" style="z-index: 4;" @click="jiesuo">
					<u-icon name="lock-fill" color="#ffffff" size="60"></u-icon>
					<view class="titletext xiaobai" style="font-size: 40rpx;">点击解锁视频</view>
				</view>
			</view>
		</template>
		<!-- <template v-if="dataAll.is_look==2">
			<video class="shipin" :src="dataAll.video_url_text"></video>
		</template> -->
		<video class="shipin" :src="dataAll.video_url_text"></video>
		<view class="mainpadding">
			<!--  -->
			<view class="flexbetween">
				<view class="flexleft" @click="jumper('/pages_homepage/gerenzhuye?id=',listuser_id)">
					<image class="touxiangplas margin_right2" :src="dataAll.user.avatar_text" mode=""></image>
					<view class="">
						<view class="ershiba xiaobai">{{dataAll.user.nickname}}</view>
						<view class="margin_top1 xiaohui strongtext">粉丝：{{dataAll.user.myfs_num}}</view>
					</view>
				</view>
				<view class="xhbtn flexcenter" v-show="dataAll.is_gz==0 && listuser_id!=myuserId"
					@click.stop="gz_fn(listuser_id)">
					关注
				</view>
				<view class="xhbtn flexcenter" v-show="dataAll.is_gz==1 && listuser_id!=myuserId"
					@click.stop="gz_fn(listuser_id)">
					已关注
				</view>
			</view>
			<view class="margin_top titletext xiaobai">{{dataAll.des}}</view>
			<view class="flexleft margin_top2">
				<view class="flexleft margin_right5">
					<view class="margin_right1">
						<u-icon name="play-circle" color="#8E8E8E" size="24"></u-icon>
					</view>
					<view class="strongtext xiaohui">{{dataAll.view_num}}</view>
				</view>
				<view class="flexleft">
					<view class="margin_right1">
						<u-icon name="clock" color="#8E8E8E" size="24"></u-icon>
					</view>
					<view class="strongtext xiaohui">{{formatSeconds(Number(dataAll.sc))}}</view>
				</view>
			</view>
			<view class="mainpadding margin_top huibox flexbetween">
				<view class="ershi flexcenter">
					<view class="" @click="dz_fn(listid)">
						<view class="flexcolumn">
							<u-icon name="heart" color="#fff" size="24" v-show="dataAll.is_dz==0"></u-icon>
							<u-icon name="heart-fill" color="#ff0000" size="24" v-show="dataAll.is_dz==1"></u-icon>
						</view>
						<view class="smalltext xiaobai textcenter margin_top1">喜欢</view>
					</view>
				</view>
				<view class="ershi flexcenter">
					<view class="" @click="sc_fn(listid)">
						<view class="flexcolumn">
							<u-icon name="star" color="#fff" size="24" v-show="dataAll.is_collect==0"></u-icon>
							<u-icon name="star-fill" color="#ffa126" size="24" v-show="dataAll.is_collect==1"></u-icon>
						</view>
						<view class="smalltext xiaobai textcenter margin_top1">收藏</view>
					</view>
				</view>
				<view class="ershi flexcenter" @click="show = true" v-if="Number(dataAll.price) && dataAll.is_look!=2">
					<view class="flexcolumn">
						<image class="jbicon" src="../static/image/sysem/jbd.png" mode=""></image>
						<view class="smalltext xiaohuang textcenter margin_top1">{{dataAll.price}}金币</view>
					</view>
				</view>
				<!-- <view class="ershi flexcenter">
					<view class="">
						<image class="jbicon" src="../static/image/sysem/vip.png" mode=""></image>
						<view class="smalltext xiaohong textcenter margin_top1">VIP</view>
					</view>
				</view> -->
				<view class="ershi flexcenter" @click="xiazai()">
					<view class="flexcolumn">
						<image class="jbicon" src="../static/image/sysem/xz.png" mode=""></image>
						<view class="smalltext xiaobai textcenter margin_top1">下载</view>
					</view>
				</view>
				<view class="ershi flexcenter" @click="shareshow=true">
					<view class="">
						<view class="">
							<u-icon name="share-square" color="#fff" size="24"></u-icon>
						</view>
						<view class="smalltext xiaobai textcenter margin_top1">转发</view>
					</view>
				</view>
			</view>
			<!-- 导航 -->
			<view class="tab_nav">
				<view class="navTitle" v-for="(item,index) in navList" :key="index">
					<view :class="{'active':isActive == index}" @click="checked(index)">
						{{item.title}}
					</view>
				</view>
			</view>
			<!-- 视频 -->
			<view class="" v-if="isActive == 0">
				<view class="flexbetween flex_wrap">
					<view class="shibox margin_top" v-for=" (item,index) in list.data" :key="item.id"
						@click="jumpDetail(item.id,item.user.id);item.view_num =Number(item.view_num)+1">
						<view class="dingwei">
							<view class="jinbbox flexcenter" v-if="Number(item.price)">
								<image class="jinvi" src="../static/image/sysem/jb.png" mode=""></image>
								<view class="strongtext fonweight" style="color:#FEC84F ;">{{item.price}}</view>
							</view>
							<image class="shilitu" :src="item.image_text" mode=""></image>
							<view class="flexbetween"
								style="position: absolute;bottom: 20rpx; left: 20rpx; width: 88%;">
								<view class="bofangbox flexcenter">
									<view class="margin_right1">
										<u-icon name="play-right" color="#fff" size="14"></u-icon>
									</view>
									<view class="smalltext xiaobai">{{item.view_num}}</view>
								</view>
								<view class="smalltext xiaobai ">{{formatSeconds(Number(item.sc))}}</view>
							</view>
						</view>
						<view class="spbrbox" @click.stop="currentindex=index;currentdata=item;shows=true">
							<view class="ershil xiaobai yhxk">{{item.des}}</view>
							<view class="flexbetween margin_top">
								<view class="flexleft">
									<image class="touxiang margin_right1" :src="item.user.avatar_text" mode=""></image>
									<view class="strongtext xiaohui ">{{item.user.nickname}}</view>
								</view>
								<image class="sangd" src="../static/image/sysem/sgd.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 更多推荐 -->
			<view class="" v-if="isActive == 1">
				<view class="flexbetween flex_wrap">
					<view class="shibox margin_top" v-for=" (item,index) in listtj.data" :key="item.id"
						@click="jumpDetail(item.id,item.user.id);item.view_num =Number(item.view_num)+1">
						<view class="dingwei">
							<view class="jinbbox flexcenter" v-if="Number(item.price)">
								<image class="jinvi" src="../static/image/sysem/jb.png" mode=""></image>
								<view class="strongtext fonweight" style="color:#FEC84F ;">{{item.price}}</view>
							</view>
							<image class="shilitu" :src="item.image_text" mode=""></image>
							<view class="flexbetween"
								style="position: absolute;bottom: 20rpx; left: 20rpx; width: 88%;">
								<view class="bofangbox flexcenter">
									<view class="margin_right1">
										<u-icon name="play-right" color="#fff" size="14"></u-icon>
									</view>
									<view class="smalltext xiaobai">{{item.view_num}}</view>
								</view>
								<view class="smalltext xiaobai ">{{formatSeconds(Number(item.sc))}}</view>
							</view>
						</view>
						<view class="spbrbox" @click.stop="currentindex=index;currentdata=item;shows=true">
							<view class="ershil xiaobai yhxk">{{item.des}}</view>
							<view class="flexbetween margin_top">
								<view class="flexleft">
									<image class="touxiang margin_right1" :src="item.user.avatar_text" mode=""></image>
									<view class="strongtext xiaohui ">{{item.user.nickname}}</view>
								</view>
								<image class="sangd" src="../static/image/sysem/sgd.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 评论 -->
			<view class="" v-if="isActive == 2">
				<view class="" style="padding-bottom: 160rpx;">
					<view class="xiahuaxian margin_top" v-for="item in listpl.data" :key="item.id"
						@click="focus=true;pid=item.id">
						<view class="flextop" style="justify-content: flex-start;">
							<image class="pldtx margin_right2" :src="item.user.avatar_text" mode=""></image>
							<view class="">
								<view class="titletext xiaohui ">{{item.user.nickname}}</view>
								<view class="strongtext xiaobai margin_top1">{{item.content}}</view>
								<view class="smalltext xiaohui margin_top1">{{item.createtime_text}}</view>
							</view>
						</view>
						<view class="margin_top2" v-for="ite in item.childlist" :key="ite.id"
							style="margin-left: 80rpx;">
							<view class="flextop" style="justify-content: flex-start;">
								<image class="plxtx margin_right2" :src="ite.user.avatar_text" mode="">
								</image>
								<view class="">
									<view class="strongtext xiaohui ">{{ite.user.nickname}}</view>
									<view class="strongtext xiaobai margin_top1">{{ite.content}}</view>
									<view class="smalltext xiaohui margin_top1">{{ite.createtime_text}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="gudingdb dibpjvox">
					<view class="pjbox flexbetween">
						<input type="text" placeholder="说点什么吧" :focus="focus" @blur="focus=false;pid=''"
							v-model="contents" @confirm="sendmsg" confirm-type="send">
						<view class="fsbtn flexcenter" @click="sendmsg">发送</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 分享 -->
		<u-popup :show="shareshow" @close="shareshow=false" :round="20" bgColor="#282536">
			<view class="mainpadding">
				<view class="flexcolumn" style="position: relative;top: -50rpx;">
					<image src="@/static/logo.png" class="flexcenter"
						style="width: 120rpx;height: 120rpx;border-radius: 50%;" mode=""></image>
					<view class="xiaobai sanshier margin_top">短视频</view>
				</view>
				<view class="flexcenter margin_top">
					<uqrcode ref="uqrcode" canvas-id="qrcode" @click="ewmfn" v-bind:value="qrcodeurl"
						:options="{ margin: 10}" size="120">
					</uqrcode>
				</view>
				<view class="xiaobai ershil margin_top textcenter">推广连接:{{qrcodeurl}}</view>
				<view class="flexbetween margin_top6">
					<view class="bigbtn" style="width: 45%;" @click="saveewm">保存二维码</view>
					<view class="bigbtn" style="width: 45%;" @click="copy(qrcodeurl)">复制推广链接</view>
				</view>
			</view>
		</u-popup>
		<!-- 充值 -->
		<u-popup :show="contactshow" @close="contactshow=false" :round="20" bgColor="#282536">
			<view class="mainpadding">
				<view class="xiaobai flexcenter sanshier margin_top">联系客服</view>
				<view class="flexcenter margin_top">
					<image :src="system.whatcode" style="width:300rpx;height:300rpx;" mode=""></image>
				</view>
				<view class="xiaobai ershil margin_top6 textcenter">扫描上方二维码添加客服微信</view>
				<view class="xiaobai ershil margin_top textcenter">或点击此处电话<text  @click="callphone(system.kf_tel)" style="color:#DD5056;">联系客服</text></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				isActive: 0,
				navList: [{
					title: 'Ta的视频'
				}, {
					title: "更多推荐"
				}, {
					title: "评论"
				}],
				show: false,
				shows: false,
				yeshow: false,
				pageShow: false,
				dataAll: {},
				listuser_id: "",
				myuserId: "",
				page: 1,
				list: {
					data: []
				},
				contactshow:false,
				pagetj: 1,
				listtj: {
					data: []
				},
				pagepl: 1,
				listpl: {
					data: []
				},
				currentindex: 0,
				currentdata: {},
				contents: "",
				pid: "",
				focus: false,
				userInfo: {},
				shareshow: false,
				qrcodeurl: "",
				system:""
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.listuser_id = options.listuser_id
			this.getDetail()
			this.init()
			this.inittj()
			this.initpl()
			this.getdata()
		},
		onShow() {
			this.myuserId = uni.getStorageSync("user_id")
			if (this.pageShow) {
				this.getDetail()
			}
			if (httpRequest.checkIsLogin()) {
				this.getuserinfo()
			}
		},
		methods: {
			enterchat() { //进入聊天
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				let data = {
					firend_id: 1,
					friend_name: "客服",
					firend_avatar_text: ""
				}
				uni.navigateTo({
					url: "/pages_message/chat?msg=" + encodeURIComponent(JSON.stringify(data))
				})
			},
			ewmfn() {
				this.$refs.uqrcode.toTempFilePath({
					success: res => {
						console.log(res);
						var i = [res.tempFilePath]; //获取当前页面的轮播图数据
						//uniapp预览轮播图
						uni.previewImage({
							current: 0, //预览图片的下标
							urls: i //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
						})
					}
				});
			},
			saveewm() {
				this.$refs.uqrcode.save({
					success: () => {
						httpRequest.toast("保存成功")
					}
				});
			},
			getdata() {
				let _this = this;
				httpRequest.request('/api/index/getConfigInfo', 'GET', {}).then(res => {
					if (res.code == 1) {
						this.system = res.data
						this.qrcodeurl = res.data.share_url + '?code=' + uni.getStorageSync("user_id")
					}
				})
			},
			xiazai() {
				if (this.dataAll.is_look != 2) {
					httpRequest.toast("请解锁后下载")
					return false
				}
				let that = this
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})

				uni.downloadFile({ //下载文件资源到本地,返回文件的本地临时路径
					url: that.dataAll.video_url_text, //网络图片路径
					success: (res) => {
						var imageUrl = res.tempFilePath; //临时文件路径
						uni.saveImageToPhotosAlbum({ //保存图片到系统相册
							filePath: imageUrl,
							success: (res) => {
								uni.hideLoading()
								httpRequest.toast("保存成功")
								console.log('保存成功', res);
							},
							fail: (err) => {
								uni.hideLoading()
								httpRequest.toast("保存失败，请重试！")
								console.log('保存失败', err);
							}
						})
					},
					fail(err) {
						console.log("请求失败", err);
					}
				})
			},
			jiesuo() {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				if (this.dataAll.is_look == 0) {
					uni.navigateTo({
						url: "/pages_mypage/huiyuan"
					})
				} else {
					this.show = true
				}
			},
			pay() {
				this.show = false
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				httpRequest.request('/api/videocl/create_order', 'GET', {
					video_id: this.listid
				}).then(res => {
					uni.hideLoading()
					if (res.code == -1) {
						this.yeshow = true
					} else if (res.code == 1) {
						httpRequest.toast("解锁成功")
						this.getDetail()
					} else {
						httpRequest.toast(res.msg)
					}
				})
			},
			getuserinfo() {
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					this.userInfo = res.data
				})
			},
			getDetail() {
				let data = {
					id: this.listid
				}
				if (this.listuser_id == this.myuserId) {
					this.$set(data, "is_self", 1)
				}
				httpRequest.request('/api/videocl/videoDetail', 'GET', data).then(res => {
					if (res.code == 0) {
						httpRequest.toast("视频已下架或删除")
						setTimeout(() => {
							uni.navigateBack(1)
						}, 500)
					}
					this.dataAll = res.data
					this.pageShow = true
				}).catch(err => {})
			},
			dz_fn(id) { //点赞/取消点赞
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				httpRequest.request('/api/videocl/clVideoDz', 'GET', {
					id
				}).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.getDetail()
						this.init()
						this.inittj()
					}
				})
			},
			sc_fn(id) { //收藏/取消收藏
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				httpRequest.request('/api/videocl/clVideoCollect', 'GET', {
					id
				}).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.getDetail()
						this.init()
						this.inittj()
					}
				})
			},
			gmhuiyuan(url) {
				uni.navigateTo({
					url
				})
			},
			gz_fn(id) { //关注/取消关注
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				httpRequest.request('/api/user/clUserGz', 'GET', {
					b_user_id: id
				}).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.getDetail()
						this.init()
						this.inittj()
						uni.$emit("guanzhuemitfn", {
							is_gz: this.dataAll.is_gz == 0 ? 1 : 0,
							frienduser_id: id
						})
					}
				})
			},
			jumpDetail(id, listuser_id) {
				uni.navigateTo({
					url: "/pages_homepage/shipinxq?id=" + id + "&listuser_id=" + listuser_id
				})
				this.addviewnum(id)
			},
			addviewnum(id) {
				httpRequest.request('/api/videocl/addViewNum', 'GET', {
					id
				}).then(res => {})
			},
			init(isPage, page) {
				let _this = this
				httpRequest.request('/api/videocl/videoIndex', 'GET', {
					page: page || 1,
					limit: 12,
					user_id: this.listuser_id
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			inittj(isPage, page) {
				let _this = this
				httpRequest.request('/api/videocl/videoIndex', 'GET', {
					page: page || 1,
					limit: 12,
				}).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.listtj;
						if (isPage == true) {
							_this.listtj.data = dataList.data.concat(resList.data);
						} else {
							_this.listtj = res.data
							_this.listtj.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			sendmsg() {
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
					return false
				}
				if (this.contents == "") {
					httpRequest.toast("评论内容不能为空")
					return false
				}
				let data = {
					video_id: this.listid,
					pid: this.pid,
					content: this.contents,
				}
				let url = '/api/videocl/addVideoComment';
				httpRequest.request(url, 'GET', data).then(res => {
					if (res.code == 1) {
						this.pid = ""
						this.contents = ""
						this.initpl()
					} else {
						httpRequest.toast(res.msg)
					}
				})
			},
			initpl(isPage, page) {
				let _this = this
				let url = "/api/videocl/videoCommentIndex"
				let data = {
					page: page || 1,
					limit: 20,
					id: this.listid
				}
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.listpl;
						if (isPage == true) {
							_this.listpl.data = dataList.data.concat(resList.data);
						} else {
							_this.listpl = res.data
							_this.listpl.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = null
				let page = null
				if (this.isActive == 0) {
					list = _this.list;
					page = _this.page;
				}
				if (this.isActive == 1) {
					list = _this.listtj;
					page = _this.pagetj;
				}
				if (this.isActive == 2) {
					list = _this.listpl;
					page = _this.pagepl;
				}
				if (list.last_page <= page) {
					return false;
				}
				page++;
				if (this.isActive == 0) {
					_this.page = page;
					_this.init(true, page);
				}
				if (this.isActive == 1) {
					_this.pagetj = page;
					_this.inittj(true, page);
				}
				if (this.isActive == 2) {
					_this.pagepl = page;
					_this.initpl(true, page);
				}
			},
			jumper(url, val) {
				uni.navigateTo({
					url: url + val
				})
			},
			close() {
				this.show = false
			},
			yeclose() {
				this.yeshow = false
			},
			checked(index) {
				this.isActive = index
			},

		}
	}
</script>
<style lang="scss" scoped>
	.toumingbox {
		background-color: #000;
		opacity: .5;
		position: absolute;
		left: 0;
		width: 100%;
		height: 449rpx;
		z-index: 2;
	}

	// 视频
	.sangd {
		width: 4rpx;
		height: 24rpx;
	}

	.touxiang {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50rpx;
	}

	.spbrbox {
		padding: 30rpx 20rpx;
	}

	.bofangbox {
		padding: 7rpx 10rpx;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		background-color: rgba(255, 255, 255, .3);
	}

	.shilitu {
		width: 332rpx;
		height: 176rpx;
		border-radius: 13rpx 13rpx 0rpx 0rpx;
	}

	.shibox {
		width: 48%;
		background: #282536;
		border-radius: 13rpx 13rpx 13rpx 13rpx;
	}
</style>
<style lang="scss" scoped>
	.quczbtn {
		width: 254rpx;
		height: 81rpx;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		background-color: #DD5056;
		color: #FFFFFF;
		border: 2rpx solid #DD5056;
	}

	.quxiaobtn {
		width: 254rpx;
		height: 81rpx;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		color: #DD5056;
		border: 2rpx solid #DD5056;
	}

	.ljjs {
		width: 184rpx;
		height: 77rpx;
		background: #DD5056;
		border-radius: 128rpx 128rpx 128rpx 128rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.hdjb {
		width: 100rpx;
		height: 100rpx;
	}

	.fsbtn {
		width: 102rpx;
		height: 56rpx;
		background: #DD5056;
		border-radius: 38rpx 38rpx 38rpx 38rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.pjbox {
		padding: 8rpx 8rpx 8rpx 30rpx;
		background: #F3F3F3;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
	}

	.dibpjvox {
		background-color: #282536;
		padding: 30rpx 30rpx 60rpx;
	}

	.plxtx {
		width: 42rpx;
		height: 42rpx;
		border-radius: 50rpx;
	}

	.pldtx {
		width: 77rpx;
		height: 77rpx;
		border-radius: 50rpx;
	}

	.jinvi {
		width: 22rpx;
		margin-right: 7rpx;
		height: 22rpx;

	}

	.jinbbox {
		z-index: 1;
		position: absolute;
		top: 0;
		left: 0;
		background: #FF4B53;
		border-radius: 13rpx 0rpx 13rpx 0rpx;
		padding: 5rpx 16rpx 5rpx 10rpx;
	}

	.tab_nav {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tab_nav .navTitle {
		height: 90rpx;
		line-height: 90rpx;
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		font-weight: 600;
		color: #484557;
	}

	.active {
		font-size: 30rpx;
		color: #F3F1FF;
		font-weight: bold;
		position: relative;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 40rpx;
		height: 6rpx;
		border-radius: 9rpx;
		background-size: 100% 100%;
		background: #dd5056;
		left: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		margin: auto;
	}

	.jbicon {
		margin: auto;
		width: 44rpx;
		height: 44rpx;
	}

	.huibox {
		background: #1B192B;
	}

	.xhbtn {
		background-color: #DD5056;
		width: 105rpx;
		height: 52rpx;
		border-radius: 41rpx;
		font-size: 22rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #fff;
	}

	.touxiang {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50rpx;
	}

	.touxiangplas {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.shipin {
		height: 449rpx;
		width: 100%;
	}
</style>